<!-- 测试render函数 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- 引入vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
  />
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 时间格式化 moment -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

  <!-- 时间格式化 dayjs -->
  <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  <!-- dayjs 语言包-->
  <script src="https://unpkg.com/dayjs@1.8.21/locale/zh-cn.js"></script>
  <!-- dayjs插件 relativeTime -->
  <script src="https://unpkg.com/dayjs@1.8.21/plugin/relativeTime.js"></script>
  <body>
    <div id="app">
      <div>
        <el-button plain @click="open1"> 成功 </el-button>
        <el-input v-model="time"></el-input>
        <el-button plain @click="fomartTime"> 时间格式化 </el-button>
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="选项" prop="cascader.val">
            <el-cascader
              v-model="form.cascader.val"
              placeholder="试试搜索：指南"
              :options="options"
              :props="{ multiple: true }"
              filterable
            ></el-cascader>
          </el-form-item>
          
          <el-form-item label="选项2" :prop="`${form.array[0].name}`">
          <!-- 绑定数组验证方式1 -->
          </el-form-item>
          <div v-for="(item,index) in form.array" :key="index">
            <el-form-item label="name" 
            :prop="`array[${index}].name`" 
            :rules="[
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]">
               <el-input placeholder="name" v-model="item.name"></el-input>
           </el-form-item>
          </div>
        </el-form>
        <el-button plain @click="submit"> 提交 </el-button>
      </div>
    </div>
  </body>
  <script>
    dayjs.locale("zh-cn");
    dayjs.extend(window.dayjs_plugin_relativeTime);
    // 新建一个vue实例
    new Vue({
      el: "#app",
      data: function () {
        return {
          visible: false,
          notifications: {}, // 数组对象
          orderInfo: {
            orderId: 123123,
          },
          time: null,
          form: {
            cascader: {
              val: "",
            },
            array: [{ name: "123" }],
          },
          options: [
            {
              value: "zhinan",
              label: "指南",
              children: [
                {
                  value: "shejiyuanze",
                  label: "设计原则",
                  children: [
                    {
                      value: "yizhi",
                      label: "一致",
                    },
                    {
                      value: "fankui",
                      label: "反馈",
                    },
                    {
                      value: "xiaolv",
                      label: "效率",
                    },
                    {
                      value: "kekong",
                      label: "可控",
                    },
                  ],
                },
                {
                  value: "daohang",
                  label: "导航",
                  children: [
                    {
                      value: "cexiangdaohang",
                      label: "侧向导航",
                    },
                    {
                      value: "dingbudaohang",
                      label: "顶部导航",
                    },
                  ],
                },
              ],
            },
            {
              value: "zujian",
              label: "组件",
              children: [
                {
                  value: "basic",
                  label: "Basic",
                  children: [
                    {
                      value: "layout",
                      label: "Layout 布局",
                    },
                    {
                      value: "color",
                      label: "Color 色彩",
                    },
                    {
                      value: "typography",
                      label: "Typography 字体",
                    },
                    {
                      value: "icon",
                      label: "Icon 图标",
                    },
                    {
                      value: "button",
                      label: "Button 按钮",
                    },
                  ],
                },
                {
                  value: "form",
                  label: "Form",
                  children: [
                    {
                      value: "radio",
                      label: "Radio 单选框",
                    },
                    {
                      value: "checkbox",
                      label: "Checkbox 多选框",
                    },
                    {
                      value: "input",
                      label: "Input 输入框",
                    },
                    {
                      value: "input-number",
                      label: "InputNumber 计数器",
                    },
                    {
                      value: "select",
                      label: "Select 选择器",
                    },
                    {
                      value: "cascader",
                      label: "Cascader 级联选择器",
                    },
                    {
                      value: "switch",
                      label: "Switch 开关",
                    },
                    {
                      value: "slider",
                      label: "Slider 滑块",
                    },
                    {
                      value: "time-picker",
                      label: "TimePicker 时间选择器",
                    },
                    {
                      value: "date-picker",
                      label: "DatePicker 日期选择器",
                    },
                    {
                      value: "datetime-picker",
                      label: "DateTimePicker 日期时间选择器",
                    },
                    {
                      value: "upload",
                      label: "Upload 上传",
                    },
                    {
                      value: "rate",
                      label: "Rate 评分",
                    },
                    {
                      value: "form",
                      label: "Form 表单",
                    },
                  ],
                },
                {
                  value: "data",
                  label: "Data",
                  children: [
                    {
                      value: "table",
                      label: "Table 表格",
                    },
                    {
                      value: "tag",
                      label: "Tag 标签",
                    },
                    {
                      value: "progress",
                      label: "Progress 进度条",
                    },
                    {
                      value: "tree",
                      label: "Tree 树形控件",
                    },
                    {
                      value: "pagination",
                      label: "Pagination 分页",
                    },
                    {
                      value: "badge",
                      label: "Badge 标记",
                    },
                  ],
                },
                {
                  value: "notice",
                  label: "Notice",
                  children: [
                    {
                      value: "alert",
                      label: "Alert 警告",
                    },
                    {
                      value: "loading",
                      label: "Loading 加载",
                    },
                    {
                      value: "message",
                      label: "Message 消息提示",
                    },
                    {
                      value: "message-box",
                      label: "MessageBox 弹框",
                    },
                    {
                      value: "notification",
                      label: "Notification 通知",
                    },
                  ],
                },
                {
                  value: "navigation",
                  label: "Navigation",
                  children: [
                    {
                      value: "menu",
                      label: "NavMenu 导航菜单",
                    },
                    {
                      value: "tabs",
                      label: "Tabs 标签页",
                    },
                    {
                      value: "breadcrumb",
                      label: "Breadcrumb 面包屑",
                    },
                    {
                      value: "dropdown",
                      label: "Dropdown 下拉菜单",
                    },
                    {
                      value: "steps",
                      label: "Steps 步骤条",
                    },
                  ],
                },
                {
                  value: "others",
                  label: "Others",
                  children: [
                    {
                      value: "dialog",
                      label: "Dialog 对话框",
                    },
                    {
                      value: "tooltip",
                      label: "Tooltip 文字提示",
                    },
                    {
                      value: "popover",
                      label: "Popover 弹出框",
                    },
                    {
                      value: "card",
                      label: "Card 卡片",
                    },
                    {
                      value: "carousel",
                      label: "Carousel 走马灯",
                    },
                    {
                      value: "collapse",
                      label: "Collapse 折叠面板",
                    },
                  ],
                },
              ],
            },
            {
              value: "ziyuan",
              label: "资源",
              children: [
                {
                  value: "axure",
                  label: "Axure Components",
                },
                {
                  value: "sketch",
                  label: "Sketch Templates",
                },
                {
                  value: "jiaohu",
                  label: "组件交互文档",
                },
              ],
            },
          ],
          rules: {
            "cascader.val": [
              {
                type: "array",
                required: true,
                message: "请选择XXX",
                trigger: "change",
              },
            ],
          },
        };
      },
      created() {
        // this.time = moment('202108').format("YYYY-MM")
        // this.time = dayjs().format("YYYY-MM")
        this.time = dayjs("1995-08-12").fromNow();
      },
      methods: {
        submit() {
          this.$refs.form.validate((valid) => {
            console.log({ valid });
            console.log(this.form);
          });
        },
        fomartTime() {},
        goOrderDetail(orderId) {
          this.notifications[orderId].close();
          delete this.notifications[orderId];
        },
        open1() {
          console.log(this);
          const h = this.$createElement;
          let r = Math.random();
          let notify = this.$notify({
            title: "提示",
            dangerouslyUseHTMLString: true,
            position: "bottom-right",
            duration: 0,
            // onClick:that.notifyClick,
            message: h(
              "div",
              {
                class: "custom-oder-content",
              },
              [
                h(
                  "div",
                  {
                    style: "height: 45px;",
                  },
                  "有一条新的订单！"
                ),
                h("div", {}, [
                  h(
                    "el-button",
                    {
                      props: {
                        type: "primary",
                        size: "mini",
                      },
                      on: {
                        // click: this.close_notify, // 确定按钮的点击事件
                        click: this.goOrderDetail.bind(
                          this,
                          this.orderInfo.orderId + r
                        ), // 确定按钮的点击事件
                      },
                    },
                    "处理"
                  ),
                ]),
              ]
            ),
          });
          this.notifications[this.orderInfo.orderId + r] = notify;
        },
      },
    });
  </script>
</html>
